import React from 'react';
import './CommodityInfo.css'


const CommodityInfo = (props) => {

    const installment = props.installment
    const commodityName = props.commodityName
    const activeList = props.commodityActive
    return (
        <div className='commodityInfo-container'>
            {/* 满减 */}
            <div className="commodity-fullReduce">
                {/* <span>满600减少80</span>
                <span>购买得积分</span> */}

                {
                    activeList.map((item,index)=>{
                        return(
                            <span key={index}>{item}</span>
                        )
                    })
                }
                <span>领券
                    <i className='iconfont'>&#xe629;</i>
                </span>
            </div>
            {/* 分期付款 */}
            <div className="hirePurchase">
               {installment}
            </div>
            <div className="commodity-detailInfo">
                {commodityName}
            </div>
            <div className="commodity-delivery">
                <span>照常发货</span>
                <span>付款后48小时内发货</span>
            </div>
            <div className="commodity-icons">
               <div className="commodityIcon-item">
                   <span className='iconfont'>&#xe6d4;</span>
                   <span>&nbsp;推荐</span>
               </div>
               <div className="commodityIcon-item">
                   <span className='iconfont'>&#xe60d;</span>
                   <span>&nbsp;帮我选</span>
               </div>
               <div className="commodityIcon-item">
                   <span className='iconfont'> &#xe628;</span>
                   <span>&nbsp;分享</span>
               </div>
            </div>
        </div>
    );
}

export default CommodityInfo;
